<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #F6F8FA;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding-bottom: 70px;
        }
        
        /* 顶部导航栏 */
        .page-header {
            background-color: #fff;
            padding: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .back-btn {
            font-size: 20px;
            margin-right: 15px;
            cursor: pointer;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 500;
            flex: 1;
            text-align: center;
        }
        
        .action-menu {
            font-size: 20px;
            cursor: pointer;
        }
        
        /* 订单状态卡片 */
        .status-card {
            background-color: #2B7DE1;
            color: white;
            padding: 20px;
            border-radius: 0 0 10px 10px;
            margin-bottom: 15px;
        }
        
        .status-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .status-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .status-badge {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        
        .status-time {
            font-size: 14px;
            opacity: 0.9;
        }
        
        /* 内容卡片 */
        .content-card {
            background-color: white;
            border-radius: 10px;
            margin: 15px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .card-title-icon {
            margin-right: 8px;
            color: #2B7DE1;
        }
        
        /* 患者信息 */
        .patient-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .patient-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #E6F7FF;
            color: #1890FF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 24px;
            margin-right: 15px;
        }
        
        .patient-details {
            flex: 1;
        }
        
        .patient-name {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .patient-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 3px;
        }
        
        .patient-contact {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        
        .contact-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #F0F8FF;
            color: #2B7DE1;
            margin-right: 15px;
            cursor: pointer;
        }
        
        .contact-icon {
            font-size: 20px;
        }
        
        /* 信息列表 */
        .info-list {
            background-color: #F6F8FA;
            border-radius: 8px;
            padding: 15px;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 10px;
        }
        
        .info-item:last-child {
            margin-bottom: 0;
        }
        
        .info-label {
            width: 80px;
            color: #666;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .info-value {
            color: #333;
            font-size: 14px;
            flex: 1;
        }
        
        /* 服务项目 */
        .service-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .service-item:last-child {
            border-bottom: none;
        }
        
        .service-name {
            font-size: 14px;
        }
        
        .service-price {
            font-size: 14px;
            color: #FF4D4F;
        }
        
        .service-total {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #f0f0f0;
        }
        
        .total-label {
            font-size: 16px;
            font-weight: 500;
        }
        
        .total-price {
            font-size: 16px;
            font-weight: 500;
            color: #FF4D4F;
        }
        
        /* 护理记录 */
        .record-item {
            position: relative;
            padding-left: 20px;
            margin-bottom: 20px;
        }
        
        .record-item:last-child {
            margin-bottom: 0;
        }
        
        .record-item:before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #2B7DE1;
        }
        
        .record-item:after {
            content: "";
            position: absolute;
            left: 3px;
            top: 16px;
            width: 2px;
            height: calc(100% - 8px);
            background-color: #E6F7FF;
        }
        
        .record-item:last-child:after {
            display: none;
        }
        
        .record-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }
        
        .record-content {
            font-size: 14px;
            background-color: #F6F8FA;
            padding: 10px;
            border-radius: 6px;
        }
        
        /* 底部操作栏 */
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 15px;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            display: flex;
            gap: 15px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .action-btn {
            flex: 1;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: #2B7DE1;
            color: white;
        }
        
        .btn-secondary {
            background-color: #f0f0f0;
            color: #666;
        }
        
        .btn-warning {
            background-color: #FFF2E8;
            color: #FA541C;
        }
        
        /* 弹窗 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            width: 90%;
            max-width: 400px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .modal-close {
            font-size: 20px;
            color: #999;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .form-textarea {
            width: 100%;
            height: 120px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 14px;
            resize: none;
        }
        
        .modal-footer {
            padding: 15px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .modal-btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
        }
        
        .btn-cancel {
            background-color: #f0f0f0;
            color: #666;
        }
        
        .btn-confirm {
            background-color: #2B7DE1;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <div class="page-header">
            <div class="back-btn" onclick="history.back()">←</div>
            <div class="page-title">订单详情</div>
            <div class="action-menu">⋮</div>
        </div>
        
        <!-- 订单状态卡片 -->
        <div class="status-card">
            <div class="status-header">
                <div class="status-title">内科护理服务</div>
                <div class="status-badge">服务中</div>
            </div>
            <div class="status-time">服务时间：2023-06-15 08:00~17:00</div>
        </div>
        
        <!-- 患者信息 -->
        <div class="content-card">
            <div class="card-title">
                <span class="card-title-icon">👤</span>
                <span>患者信息</span>
            </div>
            <div class="patient-info">
                <div class="patient-avatar">李</div>
                <div class="patient-details">
                    <div class="patient-name">李先生</div>
                    <div class="patient-desc">65岁 | 男 | 高血压</div>
                    <div class="patient-desc">主治医生：王医生（内科）</div>
                </div>
            </div>
            <div class="patient-contact">
                <div class="contact-btn" onclick="callPatient()">
                    <span class="contact-icon">📞</span>
                </div>
                <div class="contact-btn" onclick="messagePatient()">
                    <span class="contact-icon">💬</span>
                </div>
            </div>
        </div>
        
        <!-- 服务地点 -->
        <div class="content-card">
            <div class="card-title">
                <span class="card-title-icon">📍</span>
                <span>服务地点</span>
            </div>
            <div class="info-list">
                <div class="info-item">
                    <div class="info-label">医院：</div>
                    <div class="info-value">北京协和医院</div>
                </div>
                <div class="info-item">
                    <div class="info-label">科室：</div>
                    <div class="info-value">内科</div>
                </div>
                <div class="info-item">
                    <div class="info-label">病房：</div>
                    <div class="info-value">5号楼 302室</div>
                </div>
                <div class="info-item">
                    <div class="info-label">床位号：</div>
                    <div class="info-value">3号床</div>
                </div>
            </div>
        </div>
        
        <!-- 服务详情 -->
        <div class="content-card">
            <div class="card-title">
                <span class="card-title-icon">📋</span>
                <span>服务详情</span>
            </div>
            <div class="info-list">
                <div class="info-item">
                    <div class="info-label">订单编号：</div>
                    <div class="info-value">202306150023</div>
                </div>
                <div class="info-item">
                    <div class="info-label">下单时间：</div>
                    <div class="info-value">2023-06-14 18:32:45</div>
                </div>
                <div class="info-item">
                    <div class="info-label">服务时间：</div>
                    <div class="info-value">2023-06-15 08:00~17:00</div>
                </div>
                <div class="info-item">
                    <div class="info-label">服务类型：</div>
                    <div class="info-value">日间护理（9小时）</div>
                </div>
            </div>
        </div>
        
        <!-- 护理需求 -->
        <div class="content-card">
            <div class="card-title">
                <span class="card-title-icon">🧩</span>
                <span>护理需求</span>
            </div>
            <div class="info-list">
                <div class="info-item">
                    <div class="info-label">主要疾病：</div>
                    <div class="info-value">高血压、冠心病</div>
                </div>
                <div class="info-item">
                    <div class="info-label">护理级别：</div>
                    <div class="info-value">二级护理</div>
                </div>
                <div class="info-item">
                    <div class="info-label">特殊需求：</div>
                    <div class="info-value">需要定时测量血压，三餐后提醒服药，协助上下床活动</div>
                </div>
                <div class="info-item">
                    <div class="info-label">注意事项：</div>
                    <div class="info-value">患者右腿行动不便，需要搀扶；饮食清淡，忌油腻辛辣</div>
                </div>
            </div>
        </div>
        
        <!-- 费用明细 -->
        <div class="content-card">
            <div class="card-title">
                <span class="card-title-icon">💰</span>
                <span>费用明细</span>
            </div>
            <div>
                <div class="service-item">
                    <div class="service-name">日间护理服务（9小时）</div>
                    <div class="service-price">¥280</div>
                </div>
                <div class="service-item">
                    <div class="service-name">血压监测（3次）</div>
                    <div class="service-price">¥30</div>
                </div>
                <div class="service-item">
                    <div class="service-name">陪同检查</div>
                    <div class="service-price">¥50</div>
                </div>
                <div class="service-total">
                    <div class="total-label">总计</div>
                    <div class="total-price">¥360</div>
                </div>
            </div>
        </div>
        
        <!-- 护理记录 -->
        <div class="content-card">
            <div class="card-title">
                <span class="card-title-icon">📝</span>
                <span>护理记录</span>
            </div>
            <div class="record-item">
                <div class="record-time">2023-06-15 08:05</div>
                <div class="record-content">
                    到达病房，与患者及家属沟通，了解患者情况和护理需求。测量生命体征：血压 145/90 mmHg，脉搏 76次/分，体温 36.5℃。
                </div>
            </div>
            <div class="record-item">
                <div class="record-time">2023-06-15 09:30</div>
                <div class="record-content">
                    协助患者前往放射科进行胸部CT检查，全程陪同。
                </div>
            </div>
            <div class="record-item">
                <div class="record-time">2023-06-15 11:45</div>
                <div class="record-content">
                    协助患者进行床上擦浴，更换床单位。测量血压 142/88 mmHg。
                </div>
            </div>
            <div class="record-item">
                <div class="record-time">2023-06-15 12:30</div>
                <div class="record-content">
                    协助患者进食午餐，提醒并监督服用午间药物。
                </div>
            </div>
            <div class="record-item">
                <div class="record-time">2023-06-15 14:00</div>
                <div class="record-content">
                    协助患者进行适当活动，在病房内缓慢行走10分钟。
                </div>
            </div>
        </div>
        
        <!-- 底部操作栏 -->
        <div class="bottom-actions">
            <div class="action-btn btn-secondary" onclick="showTransferModal()">订单转移</div>
            <div class="action-btn btn-primary" onclick="showRecordModal()">添加记录</div>
        </div>
        
        <!-- 添加护理记录弹窗 -->
        <div class="modal" id="recordModal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">添加护理记录</div>
                    <div class="modal-close" onclick="closeRecordModal()">&times;</div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">护理内容</label>
                        <textarea class="form-textarea" placeholder="请详细描述护理内容、患者状况等..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="modal-btn btn-cancel" onclick="closeRecordModal()">取消</button>
                    <button class="modal-btn btn-confirm" onclick="submitRecord()">提交记录</button>
                </div>
            </div>
        </div>
        
        <!-- 订单转移弹窗 -->
        <div class="modal" id="transferModal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">订单转移</div>
                    <div class="modal-close" onclick="closeTransferModal()">&times;</div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">转移给</label>
                        <select class="form-select" id="transferTarget" style="width: 100%; height: 40px; border: 1px solid #d9d9d9; border-radius: 4px; padding: 0 12px; font-size: 14px;">
                            <option value="1">王护工（内科 | 5年经验）</option>
                            <option value="2">李护工（内科 | 7年经验）</option>
                            <option value="3">张护工（全科 | 10年经验）</option>
                            <option value="4">赵护工（内科 | 3年经验）</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">转移原因</label>
                        <textarea class="form-textarea" placeholder="请填写转移原因..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="modal-btn btn-cancel" onclick="closeTransferModal()">取消</button>
                    <button class="modal-btn btn-confirm" onclick="confirmTransfer()">确认转移</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 显示添加记录弹窗
        function showRecordModal() {
            const modal = document.getElementById('recordModal');
            modal.classList.add('active');
        }
        
        // 关闭添加记录弹窗
        function closeRecordModal() {
            const modal = document.getElementById('recordModal');
            modal.classList.remove('active');
        }
        
        // 提交护理记录
        function submitRecord() {
            const recordContent = document.querySelector('#recordModal .form-textarea').value;
            
            if (!recordContent.trim()) {
                alert('请填写护理记录内容');
                return;
            }
            
            // 获取当前时间
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit',
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            
            // 创建新记录元素
            const recordsContainer = document.querySelector('.content-card:last-of-type');
            const newRecord = document.createElement('div');
            newRecord.className = 'record-item';
            newRecord.innerHTML = `
                <div class="record-time">${timeString}</div>
                <div class="record-content">${recordContent}</div>
            `;
            
            // 添加到护理记录列表
            recordsContainer.appendChild(newRecord);
            
            // 关闭弹窗
            closeRecordModal();
            
            // 清空输入框
            document.querySelector('#recordModal .form-textarea').value = '';
            
            // 提示成功
            alert('护理记录已添加');
        }
        
        // 显示订单转移弹窗
        function showTransferModal() {
            const modal = document.getElementById('transferModal');
            modal.classList.add('active');
        }
        
        // 关闭订单转移弹窗
        function closeTransferModal() {
            const modal = document.getElementById('transferModal');
            modal.classList.remove('active');
        }
        
        // 确认转移订单
        function confirmTransfer() {
            const transferTarget = document.getElementById('transferTarget');
            const targetName = transferTarget.options[transferTarget.selectedIndex].text;
            const reason = document.querySelector('#transferModal .form-textarea').value;
            
            if (!reason.trim()) {
                alert('请填写转移原因');
                return;
            }
            
            // 这里应该是向后端发送请求的逻辑
            // 模拟请求成功
            alert(`订单已成功转移给 ${targetName}`);
            
            // 关闭弹窗
            closeTransferModal();
            
            // 返回订单列表页
            setTimeout(() => {
                window.location.href = 'orders.html';
            }, 500);
        }
        
        // 拨打电话
        function callPatient() {
            alert('正在拨打患者电话...');
        }
        
        // 发送消息
        function messagePatient() {
            alert('正在打开消息对话框...');
        }
        
        // 获取URL参数
        function getUrlParam(name) {
            const url = new URL(window.location.href);
            return url.searchParams.get(name);
        }
        
        // 页面加载时获取订单ID并加载订单详情
        document.addEventListener('DOMContentLoaded', function() {
            const orderId = getUrlParam('id');
            if (orderId) {
                // 这里应该是向后端请求订单详情的逻辑
                console.log(`加载订单ID: ${orderId} 的详情`);
                // 模拟加载数据，实际应用中应从服务器获取
            }
        });
    </script>
</body>
</html> 